<!-- 手机登录 -->
<template>
	<view class="container">

		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader colorTheme="black" gotoNavBackCustom="1" @gotoNavBackCustomHandler="gotoNavBackCustomHandler">
			</navHeader>
		</view>

		<view class="logo-Container">
			<image class="logoIcon" :src="icon.logoIcon"></image>
			<view class="logoText">欢迎登录构购</view>
		</view>

		<view class="column-div main-Container">
			<view class="row-div tab-view">
				<view @click="loginTypeChange('phone')" :class="['column-div', 'tab-text', loginType == 'phone' ? 'tab-active' : '']">手机短信登录</view>
				<view @click="loginTypeChange('account')" :class="['column-div', 'tab-text', loginType == 'account' ? 'tab-active' : '']">账号密码登录</view>
			</view>
			<!-- <view class="loginTypeOuter-Container borderOneRpx">
				<view @click="loginTypeChange('phone')" class="loginType-Container">
					<view class="typeText" :class="loginType == 'phone' ? 'activeType' : ''">
						手机短信登录
					</view>
				</view>
				<view @click="loginTypeChange('account')" class="loginType-Container">
					<view class="typeText" :class="loginType == 'account' ? 'activeType' : ''">
						账号密码登录
					</view>
				</view>
			</view> -->

			<!-- 手机短信登录 -->
			<view v-if="loginType == 'phone'" class="oneRow main-Content">
				<view class="list-cell b-b radiusT10 height130rpx">
					<input v-model="phoneNumber" maxlength="11" class="cell-tip" type="text" value="" placeholder-class="inputHolder"
					 placeholder="请输入登录账号" />
				</view>
				<view class="list-cell b-b height130rpx">
					<input v-model="verifyCode" class="cell-tip" type="text" value="" placeholder-class="inputHolder" placeholder="请输入验证码" />
					<!-- <view @click="smsCodeHandler" class="verify-Container">
						获取验证码
					</view> -->
					<verifyCode :phoneNumber="phoneNumber"></verifyCode>
				</view>

				<view class="unRegisterUser">
					未注册的手机号验证后自动创建账户
				</view>
			</view>

			<!-- 账号密码登录 -->
			<view v-if="loginType == 'account'" class="oneRow main-Content">
				<view class="list-cell b-b radiusT10 height130rpx">
					<input class="cell-tip" type="text" v-model="phoneNumber" placeholder-class="inputHolder" placeholder="请输入手机号码" />
				</view>
				<view class="list-cell b-b height130rpx">
					<input class="cell-tip" type="password" v-model="password" placeholder-class="inputHolder" placeholder="请输入登录密码" />
				</view>
				<view @click="gotoResetPass" class="forgetPass">
					忘记密码？
				</view>
			</view>
		</view>

		<!-- 协议 -->
		<view class="agreement-Container">
			<image class="agreeIcon" :src="icon.agreeBtn" mode=""></image>
			<view class="description">
				我已同意构购<text class="agreeH5Link" @click="toRichtext('1')">《用户协议》</text>和<text class="agreeH5Link" @click="toRichtext('2')">《隐私政策》</text>
			</view>
		</view>

		<!-- 账号登录 -->
		<view @click="userLogin" class="list-cell save-btn">
			登录
		</view>

		<!-- 微信登录 -->
		<view class="column-div" style="width: 100%;">
			<view class="row-div wx-text-login">微信一键登录</view>

			<!-- #ifdef APP-PLUS -->
			<image @click="wxLoginHandler()" class="button-bg" :src="icon.weixinBtn" v-if="showWxLoginFlag"></image>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<image @click="h5WxLoginHandler()" class="button-bg" :src="icon.weixinBtn"></image>
			<!-- #endif -->
		</view>

		<view style="height: 130upx;"></view>

		<!-- #ifdef MP-WEIXIN -->
		<view class="wxLogin-Container">
			<view class="weixinLineText">
				<view class="wxLine borderOneRpx"></view>
				<view class="wxLogin">微信一键登录</view>
				<view class="wxLine borderOneRpx"></view>
			</view>
			<image class="button-bg" :src="icon.weixinBtn"></image>
			<button open-type="getUserInfo" @getuserinfo="getUserInfo" class="button-bg" :src="icon.weixinBtn"></button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import app from "@/App.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import navHeader from '@/components/nav-header/nav-header';
	import verifyCode from '@/components/verify-code/verify-code';

	export default {
		computed: {
			...mapState(['hasLogin', 'jsApiAppId', 'url'])
		},
		components: {
			navHeader,
			verifyCode
		},
		data() {
			return {
				icon: {
					backBtn: "/static/images/common/return.png",
					logoIcon: "/static/assets/login-logo.png",
					typeIcon: "/static/images/login/typeIcon.png",
					agreeBtn: "/static/assets/select.png",
					weixinBtn: "/static/images/login/weixin_bg.png",
				},

				showWxLoginFlag: false,

				fromInvitation: -1,

				loginType: "phone",
				phoneNumber: "",
				verifyCode: "",
				password: ""
			};
		},
		onLoad(options) {
			uni.removeStorageSync('wxInfo');
			uni.removeStorageSync('tokenInfo');
			this.fromInvitation = options.fromInvitation;
		},
		onShow() {
			uni.hideLoading();

			var that = this;

			// #ifdef H5 || MP-WEIXIN
			that.showWxLoginFlag = true;
			// #endif

			// #ifdef APP-PLUS
			if (plus.os.name.toLowerCase() === 'android') {
				that.showWxLoginFlag = true;
			} else {

				that.$api.globalUtil.requestAjax({
					url: "/CustomerApi/iosVersion",
					method: "POST",
					success: function(res) {
						if (res.data.success) {
							if (res.data.response == "2.0.0") {
								that.showWxLoginFlag = true;
							} else {
								that.showWxLoginFlag = false;
							}
						}
					},
				});
			}
			// #endif


			// #ifdef H5
			var code = sessionStorage.getItem("wxCode");
			if (code) {
				sessionStorage.removeItem("wxCode");
				this.jsApiLoginCallback(code);
			}
			// #endif
		},
		methods: {

			...mapMutations(['login']),

			//后退
			gotoNavBackCustomHandler() {

				var that = this;
				if (!this.hasLogin) {
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else {
					var pages = getCurrentPages(); // 获取页面栈
					if (pages.length > 1) {
						if (that.fromInvitation == 1) {
							uni.navigateBack({
								delta: 2
							});
						} else {
							uni.navigateBack({});
						}
					} else {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				}
			},


			//登录方式切换
			loginTypeChange(loginType) {
				if (this.loginType = loginType) return;
				this.loginType = loginType;
			},

			//短信验证码
			smsCodeHandler() {
				this.$api.msg("短信验证码");
			},
			toRichtext(type) {
				console.log("toRichtext", type)
				uni.navigateTo({
					url: '/pagesUser/userRichtext?type=' + type
				});
			},


			//用户登录
			userLogin() {

				let that = this;
				uni.removeStorageSync('addressData');
				uni.removeStorageSync('shopCartData');
				uni.removeStorageSync("orderStatus");
				uni.removeStorageSync('wxInfo');
				uni.removeStorageSync('tokenInfo');
				//手机短信登录
				if (this.loginType == "phone") {

					if (!that.phoneNumber) {
						that.$api.msg("请输入手机号码");
						return;
					}

					if (!that.verifyCode) {
						that.$api.msg("请输入验证码");
						return;
					}

					that.$api.globalUtil.requestAjax({
						url: "/CustomerApi/register",
						method: "POST",
						data: {
							telephone: that.phoneNumber,
							vcode: that.verifyCode
						},
						success: function(res) {
							if (res.data.success) {
								that.$api.msg("登录成功");
								setTimeout(function() {
									console.log("登录信息 = " + JSON.stringify(res.data.response));
									uni.setStorageSync('tokenInfo', JSON.stringify(res.data.response));
									that.login();

									//跳转商品
									that.$api.globalUtil.getUserInfo(that, function(res) {
										if (res.data.response.sharedGoodsCd) {
											uni.redirectTo({
												url: '/pages/detail/detail?id=' + res.data.response.sharedGoodsCd
											});
										} else {
											that.gotoNavBackCustomHandler();
										}
									});
								}, 1500);
							} else {
								that.$api.msg(res.data.msg || "登录失败");
							}
						}
					});
				}


				//账号登录
				if (this.loginType == "account") {

					if (!that.phoneNumber) {
						that.$api.msg("请输入手机号码");
						return;
					}

					if (!that.password) {
						that.$api.msg("请输入登录密码");
						return;
					}

					that.$api.globalUtil.requestAjax({
						url: "/CustomerApi/login",
						method: "POST",
						data: {
							userName: that.phoneNumber,
							password: that.password
						},
						success: function(res) {
							if (res.data.success) {
								that.$api.msg("登录成功");
								setTimeout(function() {
									uni.setStorageSync('tokenInfo', JSON.stringify(res.data.response));
									that.login();

									//跳转商品
									that.$api.globalUtil.getUserInfo(that, function(res) {
										if (res.data.response.sharedGoodsCd) {
											uni.redirectTo({
												url: '/pages/detail/detail?id=' + res.data.response.sharedGoodsCd
											});
										} else {
											that.gotoNavBackCustomHandler();
										}
									});
								}, 1500);
							} else {
								that.$api.msg(res.data.msg || "登录失败");
							}
						}
					});
				}
			},

			//忘记密码
			gotoResetPass() {
				uni.navigateTo({
					url: "resetPass?resetFlag=1"
				})
			},


			// App微信登录
			wxLoginHandler() {

				uni.showLoading({
					title: '登录中…'
				});

				uni.removeStorageSync('tokenInfo');

				var that = this;
				uni.login({
					provider: 'weixin',
					success: function(authRes) {

						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							withCredentials: true,
							success: function(infoRes) {
								uni.setStorageSync("wxInfo", JSON.stringify({
									nickName: infoRes.userInfo.nickName,
									headImg: infoRes.userInfo.avatarUrl,
									openId: infoRes.userInfo.openId,
									unionId: infoRes.userInfo.unionId
								}));

								that.$api.globalUtil.requestAjax({
									url: "/CustomerApi/wxAppRegisterOrLogin",
									method: "POST",
									data: {
										nickName: infoRes.userInfo.nickName,
										headImg: infoRes.userInfo.avatarUrl,
										openId: infoRes.userInfo.openId,
										unionId: infoRes.userInfo.unionId
									},
									success: function(res) {
										that.$api.msg("登录成功");

										setTimeout(function() {
											uni.hideLoading();

											//是否绑定手机号
											uni.setStorageSync("loginType", "app");
											that.getUserIsBindPhoneFlag(res);
										}, 1500);
									}
								});
							},
							fail(err) {
								that.$api.msg("登录失败");
								uni.hideLoading();
							}
						});
					},
					fail(err) {
						console.debug("fail", err)
						// that.$api.msg("抱歉，您没有安装微信");
						// uni.hideLoading();
					}
				});
			},


			/**
			 * H5公众号登录
			 */
			h5WxLoginHandler() {

				sessionStorage.setItem("backUrl", "/pagesUser/login/userLogin");


				//获取code
				var APPID = this.jsApiAppId;
				var REDIRECT_URI = encodeURIComponent(this.url + "jsApiPay.html", "UTF-8");
				var getCodeUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + APPID + "&redirect_uri=" +
					REDIRECT_URI + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
				window.location.replace(getCodeUrl);
			},
			jsApiLoginCallback(code) {

				var that = this;
				that.$api.globalUtil.requestAjax({
					url: "/CustomerApi/wxmpRegisterOrLogin",
					method: "POST",
					data: {
						code: code
					},
					success: function(res) {
						that.$api.msg("登录成功");
						uni.setStorageSync("wxInfo", JSON.stringify({
							code: code
						}));

						setTimeout(function() {
							uni.hideLoading();

							//是否绑定手机号
							uni.setStorageSync("loginType", "h5");
							that.getUserIsBindPhoneFlag(res);
						}, 1500);
					}
				});
			},



			/**
			 * 小程序登录
			 */
			getUserInfo: function(e) {

				let that = this;
				if (e.detail.errMsg == "getUserInfo:ok") {

					uni.login({
						provider: 'weixin',
						success: function(res) {

							var code = res.code;
							uni.getUserInfo({
								provider: 'weixin',
								success: function(res) {

									that.$api.globalUtil.requestAjax({
										url: "/CustomerApi/wxmlRegisterOrLogin",
										method: "POST",
										data: {
											code: code,
											rawData: res.rawData,
											signature: res.signature,
											encrypteData: res.encryptedData,
											iv: res.iv
										},
										success: function(res) {
											if (res.data.success) {
												that.$api.msg("登录成功");

												setTimeout(function() {
													uni.setStorageSync('tokenInfo', JSON.stringify(res.data.response));
													that.login();

													//是否绑定手机号
													uni.setStorageSync("loginType", "wxmp");
													that.getUserIsBindPhoneFlag(res);
												}, 1500);
											} else {
												that.$api.msg(res.data.msg || "登录失败");
											}
										}
									});
								}
							});
						}
					});
				}
			},


			/**
			 * 是否绑定手机号
			 */
			getUserIsBindPhoneFlag(res) {

				var that = this;

				// 是否绑定手机号
				if (res.data.code == 'E_FRT_STORE_NEED_BOUND_TELEPHONE') {
					uni.navigateTo({
						url: 'bindPhone?fromLogin=1'
					})
				} else {

					uni.setStorageSync('tokenInfo', JSON.stringify(res.data.response));
					that.login();

					//跳转商品
					that.$api.globalUtil.getUserInfo(that, function(res) {
						if (res.data.response.sharedGoodsCd) {
							uni.redirectTo({
								url: '/pages/detail/detail?id=' + res.data.response.sharedGoodsCd
							});
						} else {
							that.gotoNavBackCustomHandler();
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	/deep/ .verifyCode-Container {
		border: none;
	}

	.container {
		// padding-top: 176rpx;
	}
	
	.tab-view{
		width: 496upx;
		height: 70upx;
		background: #FFFFFF;
		border-radius: 35upx;
		position: absolute;
		top: -35upx;
		z-index: 2;
		&::before{
			content: " ";
			position: absolute;
			width: 494upx;
			height: 68upx;
			border: 1px solid #DBDBDB;
			border-radius: 35upx;
			z-index: -1;
		}
		.tab-text {
			width: calc(100% / 2);
			height: 100%;
			border-radius: 35upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			&.tab-active {
				color: #FE5E49;
				border: 1px solid #FE5E49;
			}
		}
	}

	.wx-text-login {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-top: 140upx;
		margin-bottom: 46upx;

		&::before {
			margin-right: 40upx;
			content: " ";
			width: 142upx;
			height: 1px;
			background: #DBDBDB;
		}

		&::after {
			margin-left: 40upx;
			content: " ";
			width: 142upx;
			height: 1px;
			background: #DBDBDB;
		}
	}

	.button-bg {
		width: 71upx;
		height: 71upx;
	}

	/* header部分 */
	.header-Container {
		// z-index: 999;
		// position: fixed;
		// top: 0;
		width: 100%;
		height: 176rpx;
		background: rgba(255, 255, 255, 1);

		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;

			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}

		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

	.container {
		.oneRow {
			margin-top: 20rpx;
			padding: 0 65rpx 0 95rpx;
			border-radius: 10rpx;

			.radiusT10 {
				border-radius: 10rpx 10rpx 0 0;
			}

			.radiusB10 {
				border-radius: 0 0 10rpx 10rpx;
			}

			.height130rpx {
				align-items: flex-end;
				box-sizing: border-box;
				padding-bottom: 24rpx;
				height: 130rpx;
			}

			.cell-tit {
				width: 120rpx;
				height: 100%;
				text-align: justify;

				&::after {
					display: inline-block;
					width: 100%;
					content: '';
					height: 0;
				}
			}

			.verify-Container {
				position: relative;
				margin-right: 24rpx;
				width: 140rpx;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 22rpx;
				text-align: right;
				font-size: 22rpx;
				font-family: PingFang;
				color: #FE5E49;
			}
		}
	}

	.list-cell {
		display: flex;
		align-items: center;
		height: 106rpx;
		line-height: 106rpx;
		position: relative;
		background: #fff;
		// justify-content: flex-start;

		input {
			text-align: right;
			color: #333333;
		}

		.inputHolder {
			font-size: 28rpx;
			font-family: PingFang;
			color: #BFBFBF;
			line-height: 55px;
		}

		&.save-btn {
			justify-content: center;
			margin: 0 auto;
			margin-top: 105rpx;
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #FE5E49;
			border-radius: 45rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang;
			color: rgba(255, 255, 255, 1);
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			// left: 64rpx;
			// right: 36rpx;
		}

		&.m-t {
			margin-top: 16upx;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			margin-right: 10upx;
			font-size: 28rpx;
			font-family: PingFang;
			color: #666666;
		}

		.cell-tip {
			flex: 1;
			text-align: left;
			font-size: 28rpx;
			font-family: PingFang;
			color: #333333;
			line-height: 55rpx;

			&.unBind {
				color: #FE5E49;
			}

			&.unSet {
				color: #999999;
			}
		}
	}

	.logo-Container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
		width: 100%;
		// height: 250rpx;

		.logoIcon {
			width: 160rpx;
			height: 160rpx;
		}

		.logoText {
			margin-top: 22rpx;
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

	.main-Container {
		position: relative;
		margin: 0 auto;
		margin-top: 90rpx;
		width: 690rpx;
		height: 405rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx 0px rgba(172, 172, 172, 0.2);
		border-radius: 16rpx;
		justify-content: flex-end;
		.loginTypeOuter-Container {
			position: relative;
			margin: 0 auto;
			top: -36rpx;
			width: 496rpx;
			height: 70rpx;
			background: rgba(255, 255, 255, 1);
display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			&.borderOneRpx:after {
				border-radius: 70rpx;
				border-color: #DBDBDB;
			}

			.loginType-Container {
				position: relative;
				top: 0;
				width: calc(100% / 2);
				height: 70rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				// &:first-of-type {
				// 	left: 1px;
				// }

				// &:last-of-type {
				// 	right: 1;
				// }

				.typeText.activeType {
					color: #FE5E49;
					background: #FFFFFF;
					border: 1upx solid #FE5E49;
					border-radius: 35upx 35upx 35upx 35upx;
				}

				.typeIcon {
					z-index: 9;
					position: relative;
					top: 0;
					left: 0;
					width: 250rpx;
					height: 70rpx;
				}

				.typeText {
					z-index: 9;
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					color: #333333;
				}
			}
		}

		.main-Content {
			width: 100%;
			margin-top: -30rpx;
		}

		.unRegisterUser {
			line-height: 100rpx;
			text-align: left;
			font-size: 22rpx;
			font-family: PingFang SC;
			color: rgba(153, 153, 153, 1);
		}

		.forgetPass {
			margin-right: 36rpx;
			line-height: 100rpx;
			text-align: right;
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #FE5E49;
		}
	}


	// 协议
	.agreement-Container {
		display: flex;
		justify-content: center;
		margin-top: 46rpx;
		width: 100%;
		height: 22rpx;
		line-height: 22rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC;
		// font-weight:500;
		color: rgba(153, 153, 153, 1);

		.agreeIcon {
			margin-right: 12rpx;
			width: 22rpx;
			height: 22rpx;
		}

		.description {
			color: #999999;
		}

		.agreeH5Link {
			color: #FE5E49;
		}
	}


	// 微信登录
	.wxLogin-Container {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		margin: 0 auto;
		margin-top: 60rpx;
		height: 200rpx;

		.weixinLineText {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 530rpx;
			height: 26rpx;
			line-height: 26rpx;

			.wxLine {
				position: relative;
				width: 142rpx;
				height: 1px;

				&.borderOneRpx:after {
					border-top: 0;
					border-left: 0;
					border-right: 0;
					border-color: #DBDBDB;
				}
			}

			.wxLogin {
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				color: rgba(153, 153, 153, 1);
			}
		}

		.button-bg {
			// position: absolute;
			// top: 70rpx;
			margin-top: 70rpx;
			margin-bottom: 130rpx;
			width: 71rpx;
			height: 71rpx;
		}

		button {
			border-radius: 50%;
			opacity: 0;
		}
	}
</style>
